﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>微信报名</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <!--<link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->
    <link rel="stylesheet" type="text/css" href="assets/css/app.css?v=1.0.1">

  </head>
  <body>
      <div class="page">
          <div class="content">
              <!-- 这里是页面内容区 -->
          </div>
      </div>

      <script type="text/html" id="tmplLogin">
          <!-- 默认 登录 -->
          <div id="login-box">
              <div class="list-block" style="margin-top: 15rem;">
                  <ul>
                      <li>
                          <div class="item-content">
                              <div class="item-inner">
                                  <div class="item-input" style="border-bottom: solid 1px #eee;">
                                      <input type="text" id="txtUserName" placeholder="请输入您的身份证号" />
                                  </div>
                              </div>
                          </div>
                      </li>
                      <li>
                          <div class="item-content">
                              <div class="item-inner">
                                  <div class="item-input" style="border-bottom: solid 1px #eee;">
                                      <input type="password" id="txtPassword" placeholder="请输入您的密码" />
                                  </div>
                              </div>
                          </div>
                      </li>
                  </ul>
              </div>
              <div class="content-block" style="margin:0.75rem 0;">
                  <p><a href="#" class="button button-big button-round button-primary" id="btnLogin">登录</a></p>
                  <p><a href="#/reg" class="button button-big button-round external">注册</a></p>
              </div>
              <div class="text-center">
                  <!--<a href="#/reset" class="color-gray">忘记密码</a>-->
              </div>
          </div>
      </script>

      <!-- 重置密码 -->
      <script type="text/html" id="tmplResetPassword">
          <h3 class="text-center">重置密码</h3>
          <div class="list-block">
              <ul>
                  <li>
                      <div class="item-content">
                          <div class="item-inner">
                              <div class="item-title label">用户名</div>
                              <div class="item-input">
                                  <input type="text" id="txtUserName" placeholder="请输入您的用户名" />
                              </div>
                          </div>
                      </div>
                  </li>
                  <li>
                      <div class="item-content">
                          <div class="item-inner">
                              <div class="item-title label">身份证</div>
                              <div class="item-input">
                                  <input type="text" id="txtCitizenCode" placeholder="请输入您的身份证号码" />
                              </div>
                          </div>
                      </div>
                  </li>
                  <li>
                      <div class="item-content">
                          <div class="item-inner">
                              <div class="item-title label">新密码</div>
                              <div class="item-input">
                                  <input type="password" id="txtPassword" placeholder="请输入您的新密码" />
                              </div>
                          </div>
                      </div>
                  </li>
                  <li>
                      <div class="item-content">
                          <div class="item-inner">
                              <div class="item-title label">重复新密码</div>
                              <div class="item-input">
                                  <input type="password" id="txtRepeatPassword" placeholder="请再输一次您的新密码" />
                              </div>
                          </div>
                      </div>
                  </li>
              </ul>
          </div>
          <div class="content-block">
              <p><a href="javascript:;" class="button button-big button-round button-primary" id="btnResetPassword">确定 </a></p>
              <p><a href="#" class="button button-big button-round" id="btnCancel">取消 </a></p>
          </div>
      </script>

      <!-- 注册新用户 -->
      <script type="text/html" id="tmplRegister">
          <h3 class="text-center">注册</h3>
          <div class="list-block">
              <ul>
                  
                  <li>
                      <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-name"></i></div>
                          <div class="item-inner">
                              <div class="item-title label">身份证号</div>
                              <div class="item-input">
                                  <input type="text" id="txtUserName" placeholder="请输入您的身份证号"/>
                              </div>
                          </div>
                      </div>
                  </li>
                  <!--<li>
                      <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-name"></i></div>
                          <div class="item-inner">
                              <div class="item-title label">密码</div>
                              <div class="item-input">
                                  <input type="password" id="txtPassword" placeholder="请输入您的密码"/>
                              </div>
                          </div>
                      </div>
                  </li>
                  <li>
                      <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-name"></i></div>
                          <div class="item-inner">
                              <div class="item-title label">重复密码</div>
                              <div class="item-input">
                                  <input type="password" id="txtRepeatPassword" placeholder="请再输一次您的密码"/>
                              </div>
                          </div>
                      </div>
                  </li>-->
                  <li>
                      <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-name"></i></div>
                          <div class="item-inner">
                              <div class="item-title label">姓名</div>
                              <div class="item-input">
                                  <input type="text" id="txtDisplayName" placeholder="请输入您的真实姓名"/>
                              </div>
                          </div>
                      </div>
                  </li>
                  <li>
                      <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-email"></i></div>
                          <div class="item-inner">
                              <div class="item-title label">手机</div>
                              <div class="item-input">
                                  <input type="text" id="txtMobile" placeholder="请输入您的常用手机号"/>
                              </div>
                          </div>
                      </div>
                  </li>
                  <!--<li>
                      <div class="item-content">
                          <div class="item-media"><i class="icon icon-form-email"></i></div>
                          <div class="item-inner">
                              <div class="item-title label">身份证</div>
                              <div class="item-input">
                                  <input type="text" id="txtCitizenCode" placeholder="请输入您的身份证号码"/>
                              </div>
                          </div>
                      </div>
                  </li>-->
              </ul>
          </div>
          <div class="content-block">
              <p><a href="javascript:;" class="button button-big button-round button-primary" id="btnReg">确定 </a></p>
              <p><a href="#" class="button button-big button-round" id="btnCancel">取消 </a></p>
          </div>
      </script>

      <script type='text/javascript' src='assets/js/zepto.min.js' charset='utf-8'></script>
      <script type="text/javascript" src="assets/js/zepto.md5.js"></script>
      <script>
          $.config = { router: false };
      </script>
      <script type='text/javascript' src='assets/js/sm.min.js' charset='utf-8'></script>
      <!--<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>-->
      <script type="text/javascript" src="assets/js/template-web.js"></script>
      <script type="text/javascript" src="assets/js/director.min.js"></script>
      <script type="text/javascript" src="assets/js/axios-0.17.1.min.js"></script>
      <script type="text/javascript" src="assets/js/utils.js"></script>

      <script type="text/javascript">
          var instance = axios.create({

              headers: { 'X-SS-API-KEY': 'ced47c42-5377-4d7b-b805-0e9af6afd0c9' }
              //headers: { 'X-SS-API-KEY': '4bcc175a-c9fa-4c90-9f16-34cc0816d152' }
          });

          var user = {};
          var cnUser = "lndx_user";

          $.init();

          var page = {
              RenderLogin: function () {

                  if (getCookie(cnUser) == "" || getCookie(cnUser) == null) {
                      var data = {};
                      var html = template("tmplLogin", data);
                      $(".content").html(html);
                  } else {
                      this.Goto("course_enroll.html");
                  }
                  
              },
              RenderRegister: function () {
                  var data = {};
                  var html = template("tmplRegister", data);
                  $(".content").html(html);
              },
              RenderResetPassword: function () {
                  var data = {};
                  var html = template("tmplResetPassword", data);
                  $(".content").html(html);
              },
              BindEvents: function () {
                  $(".content-block").on("click", "#btnLogin", events.Login.bind(this));
                  $(".content-block").on("click", "#btnReg", events.Reg.bind(this));
                  $(".content-block").on("click", "#btnResetPassword", events.ResetPassword.bind(this));
              },
              Goto: function (url) {
                  window.location.href = url;
              },

          };

          var events = {
              Login: function (e) {
                  console.log("user login.");
                  //console.log($.md5($("#txtPassword").val()));

                  if ($("#txtUserName").val() === null || $("#txtUserName").val() === "") {
                      //显示错误提示
                      $.toast("请输入身份证号");
                      return false;
                  }

                  if ($("#txtPassword").val() === null || $("#txtPassword").val() === "") {
                      //显示错误提示
                      $.toast("请输入密码");
                      return false;
                  }

                  var user = {};
                  user.account = $("#txtUserName").val();
                  user.password = $.md5($("#txtPassword").val());

                  instance.post("/api/v1/users/actions/login", (user)).then(function (response) {
                      setCookie("lndx_user", JSON.stringify(response.data.value), 7);
                      page.Goto("course_enroll.html");
                  }).catch(function (error) {
                      console.log(error.response.data.message);
                      $.toast(error.response.data.message);
                      return false;
                  });
              },
              ResetPassword: function (e) {
                  if ($("#txtUserName").val() === null || $("#txtUserName").val() === "") {
                      //显示错误提示
                      $.toast("请输入用户名");
                      return false;
                  }

                  if ($("#txtCitizenCode").val() === null || $("#txtCitizenCode").val() === "") {
                      //显示错误提示
                      $.toast("请输入身份证号");
                      return false;
                  }

                  if (checkIDCard($("#txtCitizenCode").val()) === false) {
                      $.toast("身份证号可能有误");
                      return false;
                  }

                  if ($("#txtPassword").val() === null || $("#txtPassword").val() === "") {
                      //显示错误提示
                      $.toast("请输入新密码");
                      return false;
                  }

                  if ($("#txtPassword").val() !== $("#txtRepeatPassword").val()) {
                      //显示错误提示
                      $.toast("两次输入的新密码不一致");
                      return false;
                  }

                  var user = {};
                  user.userName = $("#txtUserName").val();
                  user.password = $("#txtPassword").val();
                  user.citizenCode = $("#txtCitizenCode").val();

                  instance.post("/api/ss.lndx.service/account/reset", (user)).then(function (response) {
                      $.toast("重置密码成功");
                      console.log("reset password.");
                      page.RenderLogin();
                  }).catch(function (error) {
                      $.toast(error.response.data.message);
                      return false;
                  }).then(function () {

                  });


              },
              Reg: function (e) {
                  
                  //if ($("#txtUserName").val() === null || $("#txtUserName").val() === "") {
                  //    //显示错误提示
                  //    $.toast("请输入用户名");
                  //    return false;
                  //}

                  if ($("#txtUserName").val() === null || $("#txtUserName").val() === "") {
                      //显示错误提示
                      $.toast("请输入身份证号");
                      return false;
                  }

                  if (checkIDCard($("#txtUserName").val()) === false) {
                      $.toast("身份证号可能有误");
                      return false;
                  }

                  var strBirthday = $("#txtUserName").val().substr(6, 4) + "/" + $("#txtUserName").val().substr(10, 2) + "/" + $("#txtUserName").val().substr(12, 2);
                  var birthDate = new Date(strBirthday);
                  var nowDateTime = new Date();
                  var age = nowDateTime.getFullYear() - birthDate.getFullYear();
                  if (nowDateTime.getMonth() < birthDate.getMonth() || (nowDateTime.getMonth() == birthDate.getMonth() && nowDateTime.getDate() < birthDate.getDate())) {
                      age--;
                  }
                  if (age > 75) {
                      //显示错误提示
                      $.toast("对不起，您不符合注册条件");
                      return false;
                  }

                  //if ($("#txtPassword").val() === null || $("#txtPassword").val() === "") {
                  //    //显示错误提示
                  //    $.toast("请输入密码");
                  //    return false;
                  //}

                  //if ($("#txtPassword").val() !== $("#txtRepeatPassword").val()) {
                  //    //显示错误提示
                  //    $.toast("两次输入的密码不一致");
                  //    return false;
                  //}

                  if ($("#txtDisplayName").val() === null || $("#txtDisplayName").val() === "") {
                      //显示错误提示
                      $.toast("请输入姓名");
                      return false;
                  }

                  if ($("#txtMobile").val() === null || $("#txtMobile").val() === "") {
                      //显示错误提示
                      $.toast("请输入手机号");
                      return false;
                  }
                  
                  var user = {};
                  user.userName = $("#txtUserName").val();
                  //user.password = $("#txtPassword").val();
                  user.password = "111111";
                  user.displayName = $("#txtDisplayName").val();
                  user.mobile = $("#txtMobile").val();
                  //user.citizenCode = $("#txtCitizenCode").val();
                  user.citizenCode = $("#txtUserName").val();

                  
                  instance.post("/api/v1/users", (user)).then(function (response) {
                      $.toast("注册成功");
                      console.log("create new user.");
                      page.Goto("index.html");
                  }).catch(function (error) {
                      $.toast(error.response.data.message.replace(/用户名/g, "身份证"));
                      return false;
                  }).then(function () {
                      
                  });

                  

              }
          }

          $(document).ready(function () {

              var login = function () { page.RenderLogin(); };
              var reg = function () { page.RenderRegister(); };
              var reset = function () { page.RenderResetPassword(); }
              var allroutes = function () {
                  //全局路由事件
                  //var route = window.location.hash.slice(2);
                  //console.log(route || "login");
                  page.BindEvents();
              };

              var routes = {
                  "/": login,
                  "/reg": reg,
                  "/reset": reset
              };

              var router = Router(routes);
              router.configure({
                  on: allroutes
              });

              router.init("/");
          });

      </script>
  </body>
</html>